/**
 * Menu 组件样式文件
 * 包含水平菜单、垂直菜单的样式定义和响应式设计
 */

@import '../../styles/variables';

// 菜单基础样式
.menu {
  display: flex;                    // 使用 flex 布局
  list-style: none;                 // 移除列表默认样式
  padding: 0;                       // 移除内边距
  margin: 0;                        // 移除外边距
  border-bottom: 1px solid $border-color; // 底部边框分隔线
  background-color: $white;         // 白色背景

  // 水平菜单样式
  &.menu-horizontal {
    flex-direction: row;            // 水平排列
    
    // 水平菜单项样式
    .menu-item {
      position: relative;           // 相对定位，为子菜单定位做准备
      padding: 12px 20px;           // 内边距
      cursor: pointer;              // 鼠标手型
      transition: all 0.3s;         // 所有属性过渡动画
      border-bottom: 2px solid transparent; // 底部边框（激活时显示）

      // 鼠标悬停效果
      &:hover {
        color: $primary;             // 主色调
        border-bottom-color: $primary; // 底部边框颜色
      }

      // 激活状态样式
      &.is-active {
        color: $primary;             // 主色调
        border-bottom-color: $primary; // 底部边框颜色
        font-weight: 500;           // 加粗字体
      }

      // 禁用状态样式
      &.is-disabled {
        color: $disabled-color;     // 禁用颜色
        cursor: not-allowed;        // 禁用鼠标样式
        
        // 禁用状态下的悬停效果
        &:hover {
          color: $disabled-color;    // 保持禁用颜色
          border-bottom-color: transparent; // 透明边框
        }
      }
    }

    // 水平子菜单项样式
    .submenu-item {
      position: relative;           // 相对定位，为下拉菜单定位

      // 子菜单标题样式
      .submenu-title {
        padding: 12px 20px;         // 内边距
        cursor: pointer;           // 鼠标手型
        transition: all 0.3s;      // 过渡动画
        border-bottom: 2px solid transparent; // 底部边框
        display: flex;             // flex布局
        align-items: center;      // 垂直居中
        gap: 8px;                 // 图标和文字间距

        // 标题悬停效果 - 与普通菜单项保持一致
        &:hover {
          color: $primary;          // 主色调
          border-bottom-color: $primary; // 底部边框颜色
        }

        // 水平菜单箭头图标样式
        .submenu-arrow {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // 贝塞尔曲线缓动
          color: $gray-600;        // 默认颜色
          transform-origin: center; // 旋转中心点
          opacity: 0.8;           // 半透明效果
        }

        // 悬停时的箭头图标
        .submenu-title:hover .submenu-arrow {
          opacity: 1;             // 完全显示
          transform: scale(1.1);   // 轻微放大效果
        }

        // 展开状态的箭头图标
        .submenu-arrow-rotated {
          transform: rotate(180deg) scale(1.1); // 旋转180度并轻微放大
          opacity: 1;             // 完全显示
        }

        // 过渡中的箭头图标（中间状态）
        .submenu-arrow:not(.submenu-arrow-rotated) {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
      }

      // 激活的子菜单项 - 与普通菜单项保持一致
      &.is-active {
        .submenu-title {
          color: $primary;          // 主色调
          border-bottom-color: $primary; // 底部边框颜色
          font-weight: 500;        // 加粗字体
        }
      }

      // 子菜单项悬停效果 - 与普通菜单项保持一致
      &:hover {
        color: $primary;            // 主色调
        border-bottom-color: $primary; // 底部边框颜色
      }

      // 子菜单下拉面板样式
      .submenu {
        position: absolute;         // 绝对定位
        top: 100%;                 // 位于父元素底部
        left: 0;                   // 左对齐
        min-width: 160px;          // 最小宽度
        background: $white;        // 白色背景
        border: 1px solid $border-color; // 边框
        border-radius: 4px;        // 圆角
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 阴影效果
        opacity: 0;                // 初始透明度为0（隐藏）
        transform: translateY(-10px) scale(0.95); // 向上偏移并轻微缩小
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // 贝塞尔曲线缓动
        pointer-events: none;      // 初始不可交互
        z-index: 1000;             // 高层级，确保在其他元素之上

        // 展开状态
        &.menu-opened {
          opacity: 1;              // 完全显示
          transform: translateY(0) scale(1); // 恢复原位和大小
          pointer-events: auto;    // 允许交互
        }

        // 子菜单中的菜单项样式
        .menu-item {
          padding: 8px 16px;       // 较小的内边距
          border-bottom: none;     // 移除底部边框
          list-style: none;        // 移除列表标记点
          
          // 子菜单项悬停效果
          &:hover {
            background-color: $gray-100; // 浅灰色背景
            border-bottom: none;   // 移除边框
          }

          // 激活的子菜单项
          &.is-active {
            background-color: $primary-light; // 浅蓝色背景
            border-bottom: none;   // 移除边框
          }
        }
      }
    }
  }

  // 垂直菜单样式
  &.menu-vertical {
    flex-direction: column;        // 垂直排列
    border-bottom: none;           // 移除底部边框
    border-right: 1px solid $border-color; // 右侧边框分隔线

    // 垂直菜单项样式
    .menu-item {
      padding: 12px 24px;          // 内边距
      cursor: pointer;             // 鼠标手型
      transition: all 0.3s;        // 过渡动画
      border-right: 3px solid transparent; // 右侧边框（激活时显示）

      // 鼠标悬停效果
      &:hover {
        color: $primary;            // 主色调
        background-color: $gray-100; // 浅灰色背景
        border-right-color: $primary; // 右侧边框颜色
      }

      // 激活状态样式
      &.is-active {
        color: $primary;            // 主色调
        background-color: $primary-light; // 浅蓝色背景
        border-right-color: $primary; // 右侧边框颜色
        font-weight: 500;          // 加粗字体
      }

      // 禁用状态样式
      &.is-disabled {
        color: $disabled-color;     // 禁用颜色
        cursor: not-allowed;       // 禁用鼠标样式
        background-color: transparent; // 透明背景
        
        // 禁用状态下的悬停效果
        &:hover {
          color: $disabled-color;   // 保持禁用颜色
          background-color: transparent; // 透明背景
          border-right-color: transparent; // 透明边框
        }
      }
    }

    // 垂直子菜单项样式
    .submenu-item {
      // 子菜单标题样式
      .submenu-title {
        padding: 12px 24px;        // 内边距
        cursor: pointer;           // 鼠标手型
        transition: all 0.3s;      // 过渡动画
        border-right: 3px solid transparent; // 右侧边框
        display: flex;             // flex布局
        justify-content: space-between; // 两端对齐
        align-items: center;       // 垂直居中

        // 标题悬停效果
        &:hover {
          color: $primary;          // 主色调
          background-color: $gray-100; // 浅灰色背景
          border-right-color: $primary; // 右侧边框颜色
        }

        // 右侧箭头图标
        &::after {
          content: '▶';            // Unicode右箭头
          font-size: 12px;         // 小号字体
          transition: transform 0.3s; // 旋转过渡动画
        }
      }

      // 激活的子菜单项
      &.is-active {
        .submenu-title {
          color: $primary;          // 主色调
          background-color: $primary-light; // 浅蓝色背景
          border-right-color: $primary; // 右侧边框颜色
          font-weight: 500;        // 加粗字体
        }
      }

      // 展开的子菜单项
      &.is-opened {
        .submenu-title::after {
          transform: rotate(90deg); // 箭头旋转90度（向下）
        }
      }

      // 垂直子菜单面板样式
      .submenu {
        background-color: $gray-50; // 浅灰色背景
        border-left: 3px solid $border-color; // 左侧边框
        opacity: 0;                // 初始透明度为0
        max-height: 0;             // 初始高度为0
        overflow: hidden;          // 隐藏溢出内容
        transition: all 0.3s;      // 过渡动画

        // 展开状态
        &.menu-opened {
          opacity: 1;              // 完全显示
          max-height: 500px;       // 最大高度（展开动画）
        }

        // 子菜单中的菜单项样式
        .menu-item {
          padding-left: 48px;      // 更大的左内边距（缩进）
          border-right: none;      // 移除右侧边框
          list-style: none;        // 移除列表标记点
          
          // 子菜单项悬停效果
          &:hover {
            background-color: $gray-200; // 稍深的灰色背景
            border-right: none;    // 移除边框
          }

          // 激活的子菜单项
          &.is-active {
            background-color: $primary-light; // 浅蓝色背景
            border-right: none;     // 移除边框
          }
        }
      }
    }
  }
}

/**
 * 响应式设计 - 移动端适配
 * 在屏幕宽度小于768px时，水平菜单转换为垂直布局
 */
@media (max-width: 768px) {
  .menu.menu-horizontal {
    flex-direction: column;        // 转换为垂直排列
    border-bottom: none;          // 移除底部边框
    border-right: 1px solid #e8e8e8; // 添加右侧边框

    // 移动端菜单项样式
    .menu-item {
      border-bottom: 1px solid #e8e8e8; // 底部边框分隔线
      border-right: none;         // 移除右侧边框
      
      // 移动端悬停效果
      &:hover {
        border-bottom-color: #1890ff; // 底部边框颜色
        border-right: none;        // 移除右侧边框
      }

      // 移动端激活状态
      &.is-active {
        border-bottom-color: #1890ff; // 底部边框颜色
        border-right: none;        // 移除右侧边框
      }
    }

    // 移动端子菜单样式
    .submenu-item {
      .submenu {
        position: static;          // 静态定位（正常文档流）
        box-shadow: none;         // 移除阴影
        border: none;             // 移除边框
        border-top: 1px solid #e8e8e8; // 顶部边框分隔线
      }
    }
  }
}